<template>
  <view class="applyContentBox">
    <!-- #ifdef APP-PLUS || MP  -->
    <app-plus-bar/>
    <!-- #endif -->
    <uni-nav-bar :fixed="true"
                 title="报名"
                 :shadow='false'
                 color="#fff"
                 background-color="#0AAFFF"
                 right-icon="home"
                 left-icon="back"
                 @click-left="_handleLeft"
                 @click-right="_handleRight">
    </uni-nav-bar>
    <view class="applyContent">
      <view class="applyTitle">
        <view class="title1" :class='currStep == 1? "currTitle":""'>1课程信息</view>
        <view class="corrow">
          <uni-icon type="forward" color="#8f8f94" size="22"/>
        </view>
        <view class="title1" :class='currStep == 2? "currTitle":""'>2个人信息</view>
        <view class="corrow">
          <uni-icon type="forward" color="#8f8f94" size="22"/>
        </view>
        <view class="title1" :class='currStep == 3? "currTitle":""'>3提交订单</view>
      </view>
      <view class="applyConList" v-if='currStep == 1'>
        <view
            class="conItem"
            v-for="item,index in conItem"
            :key="index"
        >
          <view class="conT">{{item}}</view>
          <view class="conO">:</view>
          <view class="conV">{{item}}</view>
        </view>
      </view>
      <view class="applyConList" v-if='currStep == 3'>
        <view
            class="conItem"
            v-for="item,index in conItem"
            :key="index"
        >
          <view class="conT">{{item}}</view>
          <view class="conO">:</view>
          <view class="conV">{{item}}</view>
        </view>
      </view>
      <view class="applyConList" v-if='currStep == 2'>
        <view class="conItem">
          <view class="start">*</view>
          <view class="conT">学员姓名</view>
          <view class="conO">:</view>
          <view class="conV">
            <input class="uni-input" placeholder="请填写您的姓名"/>
          </view>
        </view>
        <view class="conItem">
          <view class="start">*</view>
          <view class="conT">学员年龄</view>
          <view class="conO">:</view>
          <view class="conV">
            <input class="uni-input" placeholder="请填写您的年龄"/>
          </view>
        </view>
        <view class="conItem">
          <view class="start">*</view>
          <view class="conT">性别</view>
          <view class="conO">:</view>
          <view class="conV">
            <radio-group class="uni-flex" name="gender">
              <label>
                <radio value="男"/>
                男</label>
              <label>
                <radio value="女"/>
                女</label>
            </radio-group>
          </view>
        </view>
        <view class="conItem">
          <view class="start">*</view>
          <view class="conT">移动电话</view>
          <view class="conO">:</view>
          <view class="conV">
            <input class="uni-input" placeholder="请填写您的号码"/>
          </view>
        </view>
        <view class="conItem">
          <view class="start"></view>
          <view class="conT">联系地址</view>
          <view class="conO">:</view>
          <view class="conV">
            <input class="uni-input" placeholder="请填写您的地址"/>
          </view>
        </view>
      </view>
      <view class="conbotton">
        <button type="primary" @click='currStep--' v-if='currStep != 1'>上一步</button>
        <button
            :class='currStep == 1? "btn1":currStep == 3?"btn3":"btn2"'
            type="primary"
            @click='_handleNext'>
          {{currStep == 3 ? '提交订单':'下一步'}}
        </button>
      </view>
    </view>
  </view>

</template>

<script>
  import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
  import uniIcon from '@/components/uni-icon/uni-icon.vue'
  import appPlusBar from '@/components/appPlusBar.vue'

  export default {
    components: {
      uniNavBar,
      uniIcon,
      appPlusBar
    },
    data() {
      return {
        currStep: 1,
        conItem: [
          '报名课程', '所属校区', '开班时间', '总课时', '上课时间', '班级', '课程总价', '去哪学价',
        ],

      }
    },
    onLoad() {
    },
    methods: {
      _handleTab(index) {
        console.log(index)
      },
      _handleLeft() {
        uni.navigateBack()
      },
      _handleRight() {
        uni.showToast({
          title: 'right'
        });
      },
      _handleNext() {
        if (this.currStep == 3) {
          uni.showToast({
            title: '提交订单'
          });
        } else {
          this.currStep++
        }
      }
    }
  }
</script>
<style scoped lang=scss>
  .applyContentBox {
    height: 100%;
    background: #F1F1F1;
    color: #8f8f94;
    font-size: 32upx;

    .applyContent {
      background: #F1F1F1;
      padding-bottom: 60upx;

      .applyTitle {
        background: #fff;
        display: flex;
        height: 100upx;
        align-items: center;
        justify-content: space-between;
        padding: 0 50upx;
        border-bottom: 0.5px solid #e5e5e5;

        .currTitle {
          color: #0AAFFF;
        }
      }

      .applyConList {
        background: #fff;
        padding: 0 18upx;
        display: flex;
        flex-direction: column;
        margin: 20upx 0 40upx 0;

        .conItem {
          display: flex;
          height: 150upx;
          align-items: center;
          border-bottom: 1px solid #e5e5e5;

          &:last-child {
            .conV {
              color: #F59357;
            }
          }

          .conT {
            text-align: justify;
            text-align-last: justify;
            width: 160upx;
          }

          .conO {
            margin: 0 80upx 0 6upx;
          }

          .conV {
            color: #000;

            .uni-flex {
              width: 220upx;
              display: flex;
              justify-content: space-between;
            }
          }

          .start {
            width: 40upx;
            line-height: 150upx;
            text-align: center;
            color: #F59357;
          }
        }
      }

      .conbotton {
        width: 700upx;
        margin: 0 auto;
        display: flex;

        uni-button {
          width: 45%;
        }

        .btn1 {
          width: 100%;
        }

        .btn3 {
          margin-left: 20upx;
          background: #F59357;;
        }
      }
    }
  }
</style>
